<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border='1px'>
        <button id="btn">反选</button>
        <thead>
            <tr>
                <th><input type="checkbox" class='checkall'> </th>
                <th>名称</th>
                <th>品牌</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name='lt'> </td>
                <td>iphone</td>
                <td>苹果</td>
                <td>6666</td>
            </tr>
            <tr>
                <td><input type="checkbox" name='lt'></td>
                <td>i-watch</td>
                <td>苹果</td>
                <td>7777</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="lt"></td>
                <td>ipad</td>
                <td>苹果</td>
                <td>8888</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取元素
        var checkall = document.querySelector('.checkall');
        var checkList = document.querySelectorAll('input[name="lt"]');
        var btn = document.querySelector('#btn');

        //注册事件
        //点击全选按钮时,其余选项跟随选中或取消
        checkall.onclick = function(){
            for(var i = 0; i < checkList.length; i++) {
                checkList[i].checked = checkall.checked;
            }
        }
        //点击其他选项,全选按钮根据其他选项做出反应
        for(var i = 0; i < checkList.length; i++) {
            checkList[i].onclick = checkClick
        }
        function checkClick(){
            if(document.querySelectorAll('input[name="lt"]:checked').length == checkList.length){
                checkall.checked = true;
            }else {
                checkall.checked = false;
            }
        }

        //当点击反选时,选项反过来,全选按钮根据情况判断
        btn.addEventListener('click',function(){
            for(var i = 0; i < checkList.length; i++) {
                if(checkList[i].checked) {
                    checkList[i].checked = false;
                }else {
                    checkList[i].checked = true;
                }
            }
            checkClick()
        })
    </script>
    <script src='../jquery-1.12.4.js'></script>
    <script>
        // $(function(){
        //     //当checkall被点击时选中或取消,所有其他都跟随选项,
        //     $('.checkall').on('click',function(){
        //         $("input[name='lt']").prop('checked',$(this).prop('checked'));
        //     })
        //     //当点击其余选项时,如果checkall根据做出判断
        //     $('input[name="lt"]').on('click',function(){
        //         $('.checkall').prop('checked',$('input[name="lt"]:checked').length == $('input[name="lt"]').length)
        //     })
        //     //当点击反选按钮时
        //     $('#btn').click(function(){
        //         var nochecked = $('input[name="lt"]:not(:checked)')
        //         $('input[name="lt"]:checked').prop('checked',false)
        //         nochecked.prop('checked',true)
        //         $('.checkall').prop('checked',$('input[name="lt"]:checked').length == $('input[name="lt"]').length)
        //     })
        // })
    </script>
</body>
</html>